<template>
  <input class="hm-input"
         type="text"
         :value="value"
         @input="sendFn"
         :[attr]="{success:isOk,error:!isOk}"
         @blur="blurFn">
  <!-- blur：表单元素的失去焦点事件 -->
</template>

<script>
export default {
  data() {
    return {
      isOk: true,
      attr: '',
    }
  },
  created(){
    //   初始化isOk的默认值
    this.isOk = this.reg.test(this.value) ? true : false
  },
  //   接收父组件传递过来的值
  props: {
    value: String, //  表示传入的value必须是一个字符串
    reg: {
      type: RegExp, //  表示传入的必须是正则表达式
      default() {
        // 这个正则表示内容不能为空
        return /^.{1,}/
      },
    },
  },
  methods: {
    blurFn() {
      // 将 attr 赋值为 class
      this.attr = 'class'
      // 收集正则表达式，用于判断用户输入的手机号码是否正确
      //   let reg = /^1[3,4,5,7,8,9]\d{9}$/
      //   test：是正则表达式的方法，用于判断传入的内容是否符合正则表达式的规则
      this.isOk = this.reg.test(this.value) ? true : false
    },
    // 绑定输入框的input事件，实时传递输入框的内容给父组件
    sendFn(e) {
      // 如何获取到输入框的内容？
      // 答：事件对象获取到 e.target.value
      //   console.log(e.target.value)
      this.$emit('input', e.target.value)
    },
  },
}
</script>

<style lang="less" scoped>
.hm-input {
  width: 100%;
  border: none;
  border-bottom: 2px solid #ccc;
}
.success {
  color: green;
  border-bottom: 2px solid green;
}
.error {
  color: red;
  border-bottom: 2px solid red;
}
</style>